<template>
	<div class="pay">
		<!-- pay区域 -->
		<h3>准备付款</h3>
		<hr/>
		<div class="box_bottom">
			<div class="box_bottom_ce">
				<el-button style="width: 5.3%;">订单号</el-button>
				<el-input readonly v-model="pay_ordid"></el-input>
				<br/>
				<el-button>收获地址</el-button>
				<el-input readonly v-model="pay_addr"></el-input>
				<br/>
				<el-button>收获电话</el-button>
				<el-input readonly v-model="pay_phone"></el-input>
				<br/>
				<el-button>付款状态</el-button>
				<el-button type="danger" @click="innerVisible = true" >未付款,点击这里去扫描付款</el-button>
			</div>
		</div>
		<hr style="width: 90%;margin: 0 0 1% 3.5%;"/>
		<el-table :data="payList">
			<el-table-column label="图片" width="150">
				<template #default="scope">
					<img :src="`${$Imgurl}/api/public/showImg/${scope.row.pic}`"/>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="商品名称"  />
			<el-table-column prop="price" label="商品价钱" />
			<el-table-column label="商品数量" prop="num"></el-table-column>
			<el-table-column label="商品总价" >
				<template #default="scope">
					{{scope.row.num * scope.row.price}}
				</template>
			</el-table-column>
		</el-table>
		<!-- 弹窗 -->
		<el-dialog title="支付" center width="30%" v-model="innerVisible">
			<template #footer>
				<img src="../../../../public/wechatToPay.jpg" style="width: 30%;height: 30%;margin-bottom: 5%;margin-right: 4%;">
				<img src="../../../../public/packetToPay.jpg" style="width: 26.1%;height: 25%;margin-bottom: 5%;margin-left: 4%;">
				<div class="dialog-footer">
					<el-button @click="innerVisible = false">取消</el-button>
					<el-button type="primary" @click="successToPay()">确认支付</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import instance from '../../../ajax/index.js';
	export default{
		name : 'Pay',
		data(){
			return {
				payList : [],
				id : 0,
				pay_ordid : '',
				pay_addr : '',
				pay_phone : '',
				innerVisible : false,
			}
		},
		computed:{
			getSums( val ){
				return (val) => {
					let sum = 0;
					for( let i in this.payList ){
						sum += this.payList[i].price * this.payList[i].num;
					}
					return '支付金额'+sum;
				}
			}
		},
		created(){
			this.id = this.pay_ordid = this.$route.query.ordid;
			this.pay_addr = this.$route.query.addr;
			this.pay_phone = this.$route.query.phone;
			this.payList = this.$store.state.tomake;
		},
		methods:{
			successToPay(){
				let obj = {
					ispay : 1,
					ordid : this.id
				}
				instance.post( 'http://127.0.0.1:8093/api/fore/ord/addPay' , obj , {
					headers : { 'Content-Type' : 'application/json' }
				} ).then( (res)=>{
					
					// instance.get( 'http://127.0.0.1:8093/api/fore/ord/findOrdLineByPage/0/5' ).then( (res)=>{
					// 	// console.log(res.data.data);
						
						
					// 	res.data.data.orders[0].ispay = ispay
					// 	console.log(res.data.data.orders[0].ispay);
						
						
					// } ).catch( (error)=>{
					// 	console.log(error);
					// } )
					
					
				} ).catch( (error)=>{
					console.log(error);
				} );
				this.innerVisible = false;
			}
		}
	}
</script>

<style scoped>
	.pay{
		position: absolute;
		top: 70px;
		width: 100%;
	}
	.box_bottom{
		width: 100%;
		line-height: 45px;
		margin-bottom: 1%;
		float: left;
	}
	.pay h3{
		font-size: 25px;
		margin-left: 5%;
	}
	.el-input{
		width: 88%;
	}
	.box_bottom_ce{
		margin-left: 3.5%;
	}
	.el-table{
		width: 90%;
		text-align: center;
		margin-left: 3.5%;
		border: 1px solid gainsboro;
	}
	hr{
		width: 95%;
	}
	img{
		width: 120px;
		height: 80px;
		vertical-align: middle;
	}
</style>
